<template>
  <div class="follow-view">
    <el-form :model="queryParam" inline size="small">
      <el-form-item label="事项名称">
        <el-input
          v-model="queryParam.matterTitle"
          placeholder="请输入事项名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="业务领域">
        <DictionarySelect
          v-model="queryParam.domainId"
          parent-dictionary-value="runway"
          clearable
        />
      </el-form-item>
      <el-form-item label="重点关注">
        <FocusSelect v-model="queryParam.isFocus" clearable />
      </el-form-item>
      <el-form-item label="交办领导">
        <LeaderSelect
          v-model="queryParam.assignLeader"
          assign-leaders
          placeholder="请选择交办领导"
          clearable
        />
      </el-form-item>
      <el-form-item label="责任领导">
        <LeaderSelect
          v-model="queryParam.responsibleLeader"
          placeholder="请选择交办领导"
          clearable
        />
      </el-form-item>
      <el-form-item label="事项状态">
        <MatterSelect v-model="queryParam.status" clearable />
      </el-form-item>
      <el-form-item label="评分等级">
        <el-select
          v-model="queryParam.matterAppraiseType"
          placeholder="请选择评分等级"
          clearable
        >
          <el-option
            v-for="option of levelCountsOptions"
            :key="option.label"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>
      <RoleGuard :role="leaderRoleGroup">
        <el-form-item label="责任单位">
          <UnitSelect
            v-model="queryParam.unitId"
            placeholder="请选择责任单位"
          />
        </el-form-item>
      </RoleGuard>
      <el-form-item>
        <el-button size="small" type="primary" @click="getInfo" icon="Search">
          搜索
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="warning"
          @click="reset"
          icon="RefreshRight"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <Table :data="tableData" :select-column="false">
      <TableColumn
        label="事项名称"
        :min-width="getColumnWidth(tableData, 'matterTitle', 100, 34)"
      >
        <template #default="{ row }">
          <el-button link type="primary" @click="followDialog.show(row)">
            {{ row.matterTitle }}
          </el-button>
        </template>
      </TableColumn>
      <TableColumn
        label="所属任务"
        prop="taskTitle"
        :min-width="getColumnWidth(tableData, 'taskTitle', 100)"
      />
      <TableColumn
        label="业务领域"
        :min-width="
          runwayDictionaryInfo.getColumnDictionaryWidth(
            tableData,
            'domainId',
            100,
          )
        "
      >
        <template v-slot="{ row }">
          <DictionaryShow
            parent-dictionary-value="runway"
            :value="row.domainId"
          />
        </template>
      </TableColumn>
      <TableColumn label="重点关注" :min-width="100">
        <template v-slot="{ row }">
          <FocusShow :status="row.isFocus" showType="text" />
        </template>
      </TableColumn>
      <TableColumn label="交办领导" :min-width="120">
        <template v-slot="{ row }">
          <LeaderShow :leader-id="row.assignLeader" />
        </template>
      </TableColumn>
      <TableColumn label="责任领导" :min-width="120">
        <template v-slot="{ row }">
          <LeaderShow :leader-id="row.responsibleLeader" />
        </template>
      </TableColumn>
      <TableColumn label="事项状态" :min-width="100">
        <template v-slot="{ row }">
          <MatterShow :status="row.status" />
        </template>
      </TableColumn>
      <TableColumn label="评分" :min-width="80">
        <template v-slot="{ row }">
          <span>{{ row?.averageAppraise ?? '' }}</span>
        </template>
      </TableColumn>
    </Table>
    <Pagination
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
      :total="page.total"
      @size-change="getInfo"
      @current-change="getInfo"
    />
    <FollowDialog ref="followDialog" @update="getInfo" />
  </div>
</template>

<script setup lang="ts">
import Table from '@/components/table/Table.vue'
import { onMounted, reactive, ref, useTemplateRef } from 'vue'
import Pagination, { PageType } from '@/components/Pagination.vue'
import { getUnitMatterByPage } from '@/api/mission/follow'
import { PageParam } from '@/type'
import TableColumn from '@/components/table/TableColumn.vue'
import { getColumnWidth } from '@/plugins/util'
import DictionaryShow from '@/components/dictionary/DictionaryShow.vue'
import DictionarySelect from '@/components/dictionary/DictionarySelect.vue'
import FollowDialog from '@/views/mission/follow/FollowDialog.vue'
import { useRouteQuery } from '@vueuse/router'
import { levelCountsOptions } from '@/type/levelCounts'
import { useRoute } from 'vue-router'
import MatterShow from '@/components/statusShow/matter/MatterShow.vue'
import MatterSelect from '@/components/statusShow/matter/MatterSelect.vue'
import LeaderSelect from '@/components/leader/LeaderSelect.vue'
import LeaderShow from '@/components/leader/LeaderShow.vue'
import FocusSelect from '@/components/statusShow/focus/FocusSelect.vue'
import FocusShow from '@/components/statusShow/focus/FocusShow.vue'
import UnitSelect from '@/components/unit/UnitSelect.vue'
import RoleGuard from '@/components/dataPermission/RoleGuard.vue'
import { leaderRoleGroup } from '@/components/dataPermission/util'
import { useGetDictionaryInfo } from '@/hooks/useGetDictionaryInfo'

const runwayDictionaryInfo = useGetDictionaryInfo('runway')

const defaultImportant = useRouteQuery('importantFocus', '', {
  transform: Number,
})

const defaultMatterAppraiseType = useRouteQuery('level', '', {
  transform: Number,
})

const defaultDomainId = useRouteQuery('domainId', '')

const followDialog =
  useTemplateRef<InstanceType<typeof FollowDialog>>('followDialog')
const route = useRoute()

const tableData = ref([])
const queryParam = reactive({
  matterTitle: null,
  domainId: defaultDomainId.value ? defaultDomainId.value : null,
  isFocus: defaultImportant.value ? defaultImportant.value : null,
  assignLeader: null,
  responsibleLeader: null,
  status: null,
  unitId: null,
  matterAppraiseType: defaultMatterAppraiseType.value
    ? defaultMatterAppraiseType.value
    : null,
})
const page = reactive<PageType>({
  currentPage: 1,
  pageSize: 20,
  total: 0,
})

function reset() {
  Object.assign(queryParam, {
    matterTitle: null,
    domainId: null,
    isFocus: null,
    assignLeaderName: null,
    responsibleLeaderName: null,
    status: null,
    unitId: null,
    matterAppraiseType: null,
  })

  getInfo()
}

async function getInfo() {
  const postData: PageParam = {
    currentPage: page.currentPage,
    pageSize: page.pageSize,
    sort: [],
    query: queryParam,
  }

  const { data } = await getUnitMatterByPage(postData)
  if (data.status === 200) {
    page.currentPage = data.data.currentPage
    page.pageSize = data.data.pageSize
    page.total = data.data.totalCount
    tableData.value = data.data.data
  }
}

onMounted(() => {
  const unitId = Number(route.query.unitId) as number
  if (unitId) {
    queryParam.unitId = unitId
  }
  const status = Number(route.query.status) as number
  if (status) {
    queryParam.status = status
  }
  getInfo()
})
</script>

<style scoped lang="scss"></style>
